extends layout
append scripts
    script.
        new Vue({
            el: '#app',
            data: {
                checked: false,
                checkedNames: [],
                picked: 'Runoob',
                selected: ''
            }
        })
block content
    // v-model 会根据控件类型自动选取正确的方法来更新元素, 并进行双向绑定
    // for 和 id 可以在点击 label 时, 相当于点击 input
    #app
        p 单个复选框:
        input#checkbox(type="checkbox" v-model="checked")
        label(for="checkbox") {{ checked }}
        p 多个复选框:
        input#runoob(type="checkbox" value="Runoob" v-model="checkedNames")
        label(for="runoob") Runoob
        input#google(type="checkbox" value="Google" v-model="checkedNames")
        label(for="google") Google
        input#taobao(type="checkbox" value="Taobao" v-model="checkedNames")
        label(for="taobao") taobao
        br
        span 选择的值为: {{ checkedNames }}
        p 单选按钮:
        input#runoob_1(type="radio" value="Runoob" v-model="picked")
        label(for="runoob_1") Runoob
        input#google_1(type="radio" value="Google" v-model="picked")
        label(for="google_1") Google
        span 选中值为: {{ picked }}
        br
        p select 列表
        select(v-model="selected" name="fruit")
            option(value="") 选择一个网站
            option(value="www.runoob.com") Runoob
            option(value="www.google.com") Google
        #output 选择的网站是: {{selected}}
